<template>
  <page class="home-page">
    <zui-header>
      <logo type="xiaoyanyun" href="/"></logo>
      <h4 class="zui-logo-text">
        |&nbsp;&nbsp;XXXXXXXX
        <br/>|&nbsp;&nbsp;XXXXX
      </h4>
      <div class="zui-rightcol" @click="openMenu" style="color: #0b8ba5;">◄XXXX►</div>
      <drop-list :config="configData" ref="droplist"></drop-list>
      <zui-button @click="onButtonClick('link')">XxXXX</zui-button>
      <zui-button @click="onButtonClick('case')">XXXXXXXX</zui-button>
      <zui-button @click="onButtonClick('plan')">XXXXXXXX</zui-button>
      <zui-button @click="onButtonClick('service')">XXXXXXXX</zui-button>
      <zui-button @click="onButtonClick('home')">XXXX</zui-button>
      <zui-button @click="onButtonClick('AboutMarketing')">关于活动</zui-button>
<!--      <zui-button @click="onButtonClick('MarketingManagementSystem')">关于活动</zui-button>-->
    </zui-header>
    <div class="banner vivify fadeIn">
      <h1 class="vivify popIn">
        <span class="br">XXXXXXXX，</span>XXXXXXXX、XXXXXX、XXXXXX、XXXXXX
      </h1>
      <h3 class="vivify popIn">XXXXXXXXXX，XXXXXXXXXX，XXXXXXXXXX</h3>
    </div>

    <div class="nav clear">
      <a class="zhichou vivify popIn">
        <div class="watermark blue">XXXX</div>
        <logo type="zhongtai"></logo>
        <logo class="mobile" type="mzhichou"></logo>
        <h3>XXXXXXXXXXXXXXXX</h3>
        <h4>XXXXXXXXXXXXXXXX>></h4>
      </a>
      <a class="hr vivify popIn delay-200">
        <div class="watermark green">XXXX</div>
        <logo type="hr"></logo>
        <logo class="mobile" type="mhr"></logo>
        <h3>XXXXXXXXXXXXXXXX</h3>
        <h4>XXXX·XXXX·XXXX·XXXX>></h4>
      </a>
      <a class="plus vivify popIn delay-400">
        <div class="watermark blue">XXXX</div>
        <logo type="plus"></logo>
        <logo class="mobile" type="mplus"></logo>
        <h3>XXXXXXXXXXXXXXXXXX</h3>
        <h4>XXXXXXXX·XXXXXXXXXXXXXXXX>></h4>
      </a>
    </div>
    <!-- <a class="join-zhichou" href="http://wx.zhichou.com/#/me/resume">
       XXXXXXXX，XXXXXXXX >>
     </a> -->
    <div class="service">
      <h1>
        XXXXXXXXXXXXXXXXXXXXXX<br/>
        XXXXXXXXXXXXXXXX
      </h1>
      <h3>
        XXXXXXXXXXXX，XXXXXXXX，XXXXXXXX！
      </h3>
      <h4>
        APPXXXX（android、ios) | XXXXXXXX | XXXXXXXX | H5XXXX<br/>
        XXXXXXXXXXXXXXXXXXXX
      </h4>
    </div>
    <div class="features">
      <ul>
        <li>
          <img :src="feature1"/>
          <h4>XXXXXXXX</h4>
          <p>XXXXXXXXXXXXXXXXXXXXXX，XXXXXXXXXXXXXXXXXXXX、XXXXXXXXXXXX。</p>
        </li>
        <li>
          <img :src="feature2"/>
          <h4>XXXXXXXX</h4>
          <p>XXXXXXXX，XXXXXXXXXXXXXX，XXXXXXXXXXXXXXXXXXXXXXXX。</p>
        </li>
        <li>
          <img :src="feature3"/>
          <h4>XXXXXXXX</h4>
          <p>XXXXXXXXXXXXXX，XXXXXX、XXXXXXXXXXXXXXXXXXXXXXXXXX</p>
        </li>
        <li>
          <img :src="feature4"/>
          <h4>XXXXXXXX</h4>
          <p>XXXXXXXXXXXXXXXXXX、XXXXXXXXXXXX、XXXXXXXXXXXXXXXXXXXXXX。</p>
        </li>
      </ul>
    </div>
    <!-- <div class="customer-case-logo">
       <img :src="companyLogo"/>
       <img class="mobile" :src="mcompanyLogo"/>
     </div> -->
    <div class="apply-hr">
      <h2>
        XXXXXXXXXXXX，XXXXXXXXXXXX
      </h2>
      <h4>
        XXXXXXXXXXXXXXXXXXXXXX，XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX、XXXXXXXXXXXXXXXXXX
      </h4>
    </div>
    <zui-footer/>
  </page>
</template>
<script>
import './less/home-page.less'
import Logo from '../components/Logo'
import Page from '../components/Page'
import ZuiHeader from '../components/Header'
import ZuiFooter from '../components/Footer'
import ZuiButton from '../components/Button'
import feature1 from '../assets/img/feature1.png'
import feature2 from '../assets/img/feature2.png'
import feature3 from '../assets/img/feature3.png'
import feature4 from '../assets/img/feature4.png'
import Util from '../Util'
import DropList from 'vue-droplist'

export default {
  components: {Page, Logo, ZuiHeader, ZuiFooter, ZuiButton, DropList},

  data() {
    return {
      feature1: feature1,
      feature2: feature2,
      feature3: feature3,
      feature4: feature4,
      carouselPerPage: (Util.os.android || Util.os.iPhone) ? 1 : 2,
      configData: {
        position: {  // XXXXXXXXXXXX，position
          top: '60px',
          right: '15px',
          bottom: '',
          left: ''
        },
        width: '40%', // XXXXXXXX
        list: [ // XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
          {text: 'XXXX', action: this.gohome},
          {text: 'XXXXXXXX', action: this.goservice},
          {text: 'XXXXXXXX', action: this.goplan},
          {text: 'XXXXXXXX', action: this.gocase},
          {text: 'XXXXXXXX', action: this.golink},
          {text: 'XXXXXXXX', action: this.goAboutMarketing},
          // {text: 'XXXXXXXX', action: this.goMarketingManagementSystem}
        ]
      }
    }
  },
  methods: {
    onButtonClick: function (e) {
      if (e == "home") {
        this.$router.push({path: '/'})
      } else if (e == "service") {
        this.$router.push({path: '/service'})
      } else if (e == "plan") {
        this.$router.push({path: '/plan'})
      } else if (e == "case") {
        this.$router.push({path: '/case'})
      } else if (e == "link") {
        this.$router.push({path: '/link'})
      } else if (e == "AboutMarketing") {
        this.$router.push({path: '/AboutMarketing'})
      } else {
        this.$router.push({path: '/'})
      }
    },
    openMenu: function () {
      this.$refs.droplist.show()
    },
    gohome: function () {
      this.$router.push({path: '/'})
    },
    goservice: function () {
      this.$router.push({path: '/service'})
    },
    goplan: function () {
      this.$router.push({path: '/plan'})
    },
    gocase: function () {
      this.$router.push({path: '/case'})
    },
    golink: function () {
      this.$router.push({path: '/link'})
    },
    goAboutMarketing: function () {
      this.$router.push({path: '/AboutMarketing'})
    },
  }

}
</script>
